<template>
  <div class="page-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="user-info">
        <el-icon class="user-icon"><User /></el-icon>
        <h1 class="student-name">用户: {{ userInfo.username }}</h1>
      </div>
      <div class="action-buttons">
        <el-button 
          type="primary" 
          :icon="Edit" 
          @click="startTest"
          class="action-button start-button"
          size="large"
        >
          <span class="button-text">开始测试</span>
        </el-button>
        <el-button 
          type="danger" 
          :icon="SwitchButton" 
          @click="logout"
          class="action-button logout-button"
          size="large"
        >
          <span class="button-text">退出登录</span>
        </el-button>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="mbti-history-container">
      <h2 class="page-title">MBTI历史测试结果</h2>
      <el-skeleton :rows="5" animated v-if="loading" />
      <el-empty description="暂无测试历史记录" v-else-if="historyList.length === 0" />
      <div v-else>
        <div class="history-list">
          <el-card 
            v-for="item in historyList" 
            :key="item.resultId" 
            shadow="hover"
            class="history-item"
            @click="goToDetail(item.mbtiType)"
          >
            <div class="mbti-type">{{ item.mbtiType }}</div>
            <div class="test-time">{{ formatTime(item.createTime) }}</div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { User, Edit, SwitchButton } from '@element-plus/icons-vue'
import request from '@/utils/request'  
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const userInfo = ref(JSON.parse(localStorage.getItem('xm-pro-user')) || {})
const historyList = ref([])
const loading = ref(false)

// 获取MBTI测试历史
const fetchHistory = async () => {
  try {
    loading.value = true
    const res = await request.get('/mbtitest/history', {
      params: {
        userId: userInfo.value.userId
      }
    })
    historyList.value = res.data || []
  } catch (error) {
    ElMessage.error('获取MBTI历史记录失败')
    console.error('获取MBTI历史失败:', error)
  } finally {
    loading.value = false
  }
}

// 格式化时间显示
const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}

// 跳转到详情页
const goToDetail = (mbtiType) => {
  router.push(`/mbti/${mbtiType}`)
}

// 开始测试
const startTest = () => {
  router.push('/notice')
}

// 退出登录
const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    customClass: 'logout-confirm-dialog'
  }).then(() => {
    localStorage.removeItem('xm-pro-user')
    ElMessage.success('退出成功')
    router.push('/login')
  }).catch(() => {
    // 取消退出
  })
}

onMounted(() => {
  if (userInfo.value.userId) {
    fetchHistory()
  } else {
    ElMessage.warning('请先登录')
    router.push('/login')
  }
})
</script>

<style scoped>
.page-container {
  display: flex;
  min-height: 100vh;
  background-color: #f8fafc;
}

.sidebar {
  width: 280px;
  background: linear-gradient(135deg, #3a416f 0%, #141727 100%);
  padding: 40px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
  width: 100%;
}

.user-icon {
  font-size: 40px;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 50%;
}

.student-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
  letter-spacing: 1px;
  text-align: center;
}

.action-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center; 
}

.action-button {
  width: 100%;
  max-width: 220px; 
  height: 50px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; 
}

.start-button {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
}

.start-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(79, 172, 254, 0.4);
}

.logout-button {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: none;
  box-shadow: 0 4px 10px rgba(240, 147, 251, 0.3);
}

.logout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(240, 147, 251, 0.4);
}

.button-text {
  margin-left: 8px;
}

.mbti-history-container {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.page-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 2px;
}

.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
}

.history-item {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  border: none;
  padding: 20px;
  text-align: center;
}

.history-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.mbti-type {
  font-size: 28px;
  font-weight: bold;
  color: #3a416f;
  margin-bottom: 15px;
  font-family: 'Arial Rounded MT Bold', sans-serif;
}

.test-time {
  font-size: 14px;
  color: #718096;
}
</style>

<style>
.logout-confirm-dialog {
  border-radius: 12px;
}
</style>
